import { EdgeView, Model } from "@antv/x6"

export default {
    nodes: [
        {
            id: 'custom-html-node',
            shape: 'custom-html-node',
            x: 0,
            y: 0,
        },
        {
            id: 'node1',
            shape: 'custom-vue-node',
            x: 0,
            y: 150,
            ports: {
                items: [
                    {
                        id: 'port_1',
                        group: 'right',
                    }
                ],
            },
        },
        {
            id: 'node2',
            shape: 'custom-vue-node',
            x: 300,
            y: 100,
            ports: {
                items: [
                    {
                        id: 'port_2',
                        group: 'left',
                    }
                ],
            },
        },
        {
            id: 'node3',
            shape: 'custom-vue-node',
            x: 320,
            y: 200,
            ports: {
                items: [
                    {
                        id: 'port_3',
                        group: 'left',
                    }
                ],
            },
        },
        {
            id: 'node4',
            shape: 'custom-vue-node',
            x: 520,
            y: 100,
            ports: {
                items: [
                    {
                        id: 'port_3',
                        group: 'left',
                    }
                ],
            },
        },
        {
            id: 'node5',
            shape: 'custom-vue-node',
            x: 520,
            y: 200,
            ports: {
                items: [
                    {
                        id: 'port_3',
                        group: 'left',
                    }
                ],
            },
        }
    ],
    edges: [
        {
            source: {
                cell: 'node1',
                port: 'port_1',
            },
            target: {
                cell: 'node2',
                port: 'port_2',
            },
            id: 'edge1',
            connector: 'smooth',

            attrs: {
                line: {
                    stroke: '#8f8f8f',
                    strokeWidth: 1,
                },
            },
            tools: {
                // name: 'button',
                name: 'vue-tool',
                // type: 'vue-button-tool',
                args: {
                    markup: [
                        {
                            tagName: 'circle',
                            selector: 'button',
                            attrs: {
                                r: 8,
                                stroke: '#fe854f',
                                strokeWidth: 2,
                                fill: 'white',
                                cursor: 'pointer',
                            },
                        },
                        {
                            tagName: 'text',
                            textContent: '+',
                            selector: 'icon',
                            attrs: {
                                fill: '#fe854f',
                                fontSize: 10,
                                textAnchor: 'middle',
                                pointerEvents: 'none',
                                y: '0.3em',
                            },
                        },
                    ],
                    text: "详情",
                    rotate: false,
                    distance: '50%',
                    offset: { x: 0, y: 0 },
                    onClick({ view }: { view: EdgeView }) {
                        console.log('view', view)
                        const edge = view.cell
                        const offset = parseInt(
                            edge.attr('line/strokeDashoffset') || '0',
                            10,
                        )
                        edge.attr({
                            line: {
                                strokeDasharray: '5, 10',
                                strokeDashoffset: offset + 20,
                            },
                        })
                    },
                },
            },
        }
    ]
    // {
    //     source: {
    //         cell: 'node1',
    //         port: 'port_1',
    //     },
    //     id: 'edge2',
    //     target: {
    //         cell: 'node3',
    //         port: 'port_3',
    //     },
    //     // vertices: [
    //     //   { x: 160, y: 200 }
    //     // ],
    //     router: 'er',
    // }
} as Model.FromJSONData